<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <title>我的网盘</title>
</head>


<style>

    /*搜索编辑框圆角*/
    #search_file{
        border-radius: 5px;
    }

    /*不可见*/
    #upload_file{
        display: none;
    }

    /*panel图片*/
    .back-panel{
        /*background-image: url("https://external-30160.picsz.qpic.cn/74a1b49482554fbd64fcf3d197bc41f7");*/
        background-size: 100% 70%;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    .flow{
        overflow: visible !important;
    }

    /*border*/
    .border-no{
        border: none;
    }

    .dropdown > a{
        color: white !important;
        text-decoration:none !important;
    }

    .form-control{
        width: 150px;
    }


</style>

<body>

<!--<nav th:replace="fragments :: menu(2)">

</nav>-->


<!--导航-->
<nav th:fragment="menu(n)" class="navbar navbar-inverse lucency-sm rounded-no lucency-sm animated fadeIn">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">切换</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" th:href="@{/}" ><b>创美网盘</b></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

                <li><a th:href="@{/}" href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                <li class="active"><a href="#" th:href="|@{/goDisk}?pagestart=1|"><sapn class="glyphicon glyphicon-tag"></sapn> 网盘</a></li>
                <li><a href="#" th:href="@{/dynamic/index}"><sapn class="glyphicon glyphicon-align-left"></sapn> 动态</a></li>
                <li><a href="#" th:href="@{/aboutus}"><span class="glyphicon glyphicon-list"></span> 关于我们</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">

                        <!--<li><img id="avatar" src="http://www.blogry.cn/images/avatar.jpg" class="img-circle" width="40px" height="40px"></li>-->
                        <li class="dropdown">
                            <a href="javascript:(0)" data-toggle="dropdown">
                                <img class="img-size-least img-circle" src="../static/images/avatar/avatar.jpg" th:src="${user.getAvatar()}">
                                <span th:text="${user.getNickname()}">hello</span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li role="presentation" class="dropdown-header">登录操作</li>
                                <li><a href="#" th:href="@{/user/logout}"  role="menuitem"><span class="glyphicon glyphicon-remove"></span> 注销</a></li>
                                <!--分割线-->
                                <li class="divider"></li>
                                <li role="presentation" class="dropdown-header">用户操作</li>
                                <li><a href="#" th:href="@{/user/editor}" role="menuitem"><span class="glyphicon glyphicon-pencil"></span> 编辑信息</a></li>
                            </ul>
                        </li>
                <!--<li class=""><a href="#"><span class="glyphicon glyphicon-pencil"></span> 修改</a></li>-->
            </ul>
        </div>
    </div>
</nav>

<br>
<br>
<br>
<br>
<br>
<br>
<!--内容区域-->
<div class="container animated bounceInUp" id="flo">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info rounded-size-sm border-no">
                <div class="panel-heading rounded-size-sm-top back-panel" id="panelhead">
                    <img class="img-size-tiny img-circle" src="../static/images/avatar/avatar.jpg" th:src="@{${user.getAvatar()}}">
                    <h3 class="text-color-white text-shadow-black-xs">Hi,<sapn th:text="${user.getNickname()}">Renyi</sapn></h3>
                    <br>
                    <!--uploadfile-->
                    <input type="file" id="upload_file" name="files" multiple="multiple">

                    <button type="button" id="upload_btn" class="btn btn-warning">
                        <span class="glyphicon glyphicon-folder-open"></span>
                         选择文件
                    </button>
                    <label id="showFile" class="label label-primary">请选择上传文件</label>
                    <br>
                    <br>
                    <button type="button" id="uploadClick_btn" class="btn btn-success">
                        <span class="glyphicon glyphicon-open"></span>
                        上传文件
                    </button>

                    <select id="select" class="selectpicker bla bla bli" data-live-search="true" name="select">
                        <div th:each="type : ${types}">
                            <option value="1" th:value="${type.getId()}" th:text="${type.getTypeName()}">文档</option>
                            <!--/*-->　　
                            <option value="2">EXE</option>
                            <option value="3">音乐</option>
                            <!--*/-->
                        </div>
                    </select>

                    <br>
                    <br>

                    <form id="search_form" action="#" th:action="@{/disk/search}" class="text-right form-inline">
<!--                        <div class="form-group">
                            <input type="text" class="form-control" id="search_text" name="fileName" placeholder="输入搜索内容...">
                        </div>-->
                        <div class="input-group">
                            <input type="text" class="form-control" id="search_text" name="fileName" placeholder="输入搜索内容...">
                            <span class="input-group-btn">
        <button class="btn btn-default" id="search_btn" onclick="SearchValidator();" type="button"><span class="glyphicon glyphicon-search"></span></button>
      </span>
                        </div>
                        <!-- /input-group -->
                        <!--<div class="btn-group">
                            <button type="button" id="search_btn" onclick="SearchValidator();" class="btn btn-info form-control">搜索</button>
                        </div>-->
                    </form>
                </div>
                <div class="panel-body">


                    <ol class="breadcrumb">
                        <li><a href="#" th:href="|@{/goDisk}?pagestart=1|">全部文件</a></li>
                        <li th:each="type : ${types}">
                            <a href="#" th:href="|@{/disk/searchType}?typeid=${type.getId()}|" th:text="${type.getTypeName()}">视频</a>
                        </li>
                        <li><a href="#" class="btn btn-info btn-xs" th:href="@{/admindisk/type}">管理类型</a></li>
                    </ol>

                    <!--<ol class="breadcrumb">
                        <li><a href="#" th:href="@{/goDisk}">全部文件</a></li>
                        <li><a href="#" th:href="|@{/disk/search}?fileName=.mp4&fileName=.AVI&fileName=.MPEG|">视频</a></li>
                        <li><a href="#" th:href="|@{/disk/search}?fileName=.jpg&fileName=.png&fileName=.ico&fileName=.gif|">图片</a></li>
                        <li><a href="#" th:href="|@{/disk/search?fileName=.mp3&fileName=.flac}|">音乐</a></li>
                        <li><a href="#" th:href="|@{/disk/search}?fileName=.doc&fileName=.docx&fileName=.xlsx|">文档</a></li>
                        <li><a href="#" th:href="|@{/disk/search}?fileName=.pptx&fileName=.dps|">PPT</a></li>
                        <li><a href="#" th:href="|@{/disk/search}?fileName=.exe|">exe程序</a></li>
                    </ol>-->
                    <div class="table table-responsive">
                        <table class="table table-hover table-responsive">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>文件名</th>
                                <th>类型</th>
                                <th>大小(mb)</th>
                                <th>上传日期</th>
                                <th>操作 <a th:if="${page.getTotalpage()} > 1" href="#" th:href="@{/disk/batch}" class="btn btn-warning btn-xs">批量操作</a></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="file : ${disk}">

                                </td>
                                <td class="count">
                                    1
                                </td>
                                <td th:text="${file.getFilename()}">创美桌面</td>
                                <td>
                                    <label class="label label-warning">
                                        <span th:if="${file.getType()} != null" th:text="${file.getType().getTypeName()}"></span>
                                        <span th:if="${file.getType()} == null">无</span>
                                    </label>
                                </td>
                                <td th:text="|${file.getFilesize()} mb|">12.2mb</td>
                                <td th:text="${file.getCreatetime()}">2020-09-06 19:46</td>
                                <td>
                                    <!--{filename}(filename=${file.getFilename()})-->
                                    <a href="#" th:href="@{/download/down/{id}/{name}(id=${file.getId()},name=${file.getFilename()})}" class="btn btn-info btn-xs margin-right-sm download_btn margin-bottom-xs"><span class="glyphicon glyphicon-download-alt"> 下载</span></a>
                                    <a href="javascript:0" th:href="@{/disk/delete/{id}(id=${file.getId()})}" class="btn btn-danger btn-xs delete_btn margin-bottom-xs margin-right-sm"><span class="glyphicon glyphicon-floppy-remove"> 删除</span></a>
                                    <a href="javascript:0" th:href="@{/disk/modify/{id}(id=${file.getId()})}" class="btn btn-primary btn-xs delete_btn margin-bottom-xs"><span class="glyphicon glyphicon-cog"> 编辑</span></a>
                                </td>
                            </tr>

                            <!--不渲染此区域-->
                            <!--/*-->
                            <tr>
                                <td>2</td>
                                <td>创美桌面</td>
                                <td>12.2mb</td>
                                <td>2020-09-06 19:46</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-sm margin-right-sm"><span class="glyphicon glyphicon-download-alt"> 下载</span></a>
                                    <a href="#" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-floppy-remove"> 删除</span></a>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>创美桌面</td>
                                <td>12.2mb</td>
                                <td>2020-09-06 19:46</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-sm margin-right-sm"><span class="glyphicon glyphicon-download-alt"> 下载</span></a>
                                    <a href="#" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-floppy-remove"> 删除</span></a>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>创美桌面</td>
                                <td>12.2mb</td>
                                <td>2020-09-06 19:46</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-sm margin-right-sm"><span class="glyphicon glyphicon-download-alt"> 下载</span></a>
                                    <a href="#" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-floppy-remove"> 删除</span></a>
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>创美桌面</td>
                                <td>12.2mb</td>
                                <td>2020-09-06 19:46</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-sm margin-right-sm"><span class="glyphicon glyphicon-download-alt"> 下载</span></a>
                                    <a href="#" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-floppy-remove"> 删除</span></a>
                                </td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>创美桌面</td>
                                <td>12.2mb</td>
                                <td>2020-09-06 19:46</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-sm margin-right-sm"><span class="glyphicon glyphicon-download-alt"> 下载</span></a>
                                    <a href="#" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-floppy-remove"> 删除</span></a>
                                </td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>创美桌面</td>
                                <td>12.2mb</td>
                                <td>2020-09-06 19:46</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-sm margin-right-sm"><span class="glyphicon glyphicon-download-alt"> 下载</span></a>
                                    <a href="#" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-floppy-remove"> 删除</span></a>
                                </td>
                            </tr>
                            <!--*/-->
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="panel-footer rounded-size-sm-footer lucency-xs">
                    <nav aria-label="...">
                        <ul class="pager">

                            <input class="border-radius-sm text-center" th:if="${page.getPagequantity()} > 1" type="text" id="pagestart" th:value="|${page.getStartpage()}|" style="width: 40px;border: 1px;">
                            <button th:if="${page.getPagequantity()} > 1" class="btn btn-default btn-sm" onclick="skipPage();">Go!</button>
                            <li th:if="${page.getStartpage()} != 1" class="previous">
                                <a href="#" th:href="|@{/goDisk}?pagestart=1|"><span aria-hidden="true"></span> 首页</a>
                            </li>

                            <li th:if="${page.getStartpage()} != ${page.getPagequantity()} and ${page.getPagequantity()} != 0" class="previous">
                                <a href="#" th:href="|@{/goDisk}?pagestart=${page.getPagequantity()}|"><span aria-hidden="true"></span> 尾页</a>
                            </li>



                            <li th:if="${page.getStartpage()} != ${page.getPagequantity()} and ${page.getPagequantity()} != 0" class="next">
                                <a href="#" th:href="|@{/goDisk}?pagestart=${page.getStartpage() + 1}|"> 下一页<span aria-hidden="true">&raquo;</span></a>
                            </li>
                            <li th:if="${page.getStartpage()} != 1" class="next">
                                <a href="#" th:href="|@{/goDisk}?pagestart=${page.getStartpage() -1 }|"><span aria-hidden="true">&laquo;</span> 上一页</a>
                            </li>

                        </ul>
                        <span th:text="|共: ${page.getPagequantity()}页|"></span>
                    </nav>
                </div>
            </div>
        </div>
    </div>

</div>


<!--/*/<th:block th:replace="fragments :: script">/*/-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--加载bootstrap验证器-->
<script src="../static/bootstrap/js/bootstrapValidator.min.js" th:src="@{/bootstrap/js/bootstrapValidator.min.js}"></script>
<!--/*/</th:block>/*/-->

<script th:inline="javascript" type="text/javascript">
        var url = [[${user.firstPicture}]];
        //alert(url);
        //设置首图
        document.getElementById("panelhead").style.backgroundImage="url(" + url + ")";
</script>

<!--初始化select-->
<script type="text/javascript">
    $(window).on('load', function () {

        $('.selectpicker').selectpicker({
            'selectedText': 'cat'
        });

        // $('.selectpicker').selectpicker('hide');
    });
</script>

<script>
    //搜索表单验证
    function SearchValidator() {

        //搜索内容
        var searchValue = $("#search_text").val();
        var message = "搜索内容不能为空!";
        if (searchValue != "" && searchValue != message){
            $("#search_form").submit();
        }else{
            $("#search_text").attr("placeholder",message);
            $("#search_text").focus();
        }
    }
</script>

<script th:inline="javascript" type="text/javascript">
    var totalpage = [[${page.getPagequantity()}]];
    var current = [[${page.getStartpage()}]];
    function skipPage() {
        var value = $("#pagestart").val();


        if (value == current || value == "" || value < 1)
            return
        else if (value <= totalpage)
            window.location = '/goDisk?pagestart=' + value;
        else
            alert("最大页数为: " + totalpage + "页");

    }
</script>
</body>
</html>